import React ,{PureComponent} from "react";
import {Redirect} from 'react-router-dom';
import {actionCreators} from "./store";
import {connect} from 'react-redux';
import{
    LoginWrapper,
    LoginBox,
    Input,
    Button
} from './style'
import axios from "axios";

class Login extends PureComponent{
    render(){
        const {loginStatus} = this.props;
        if(!loginStatus){
            return (
                <LoginWrapper>
                    <LoginBox>
                        <Input placeholder='用户名' ref={(input)=>{this.account = input}}></Input>
                        <Input type='password' placeholder='密码' ref={(input)=>{this.password = input}}></Input>
                        <Button onClick={()=>this.props.handleLogin(this.account,this.password)}>登录</Button>
                    </LoginBox>
                </LoginWrapper>
            )
        }else{
            return <Redirect to='/'></Redirect>
        }
       
    }
    componentDidMount(){
        //this.props.getDetail(this.props.match.params.id)
    }
}

const mapStateToProps = (state)=>({
   loginStatus:state.getIn(['login','login'])
})

const mapDispatchToProps = (dispatch)=>({
    handleLogin(accountElem,passwordElem){
        dispatch(actionCreators.login(accountElem.value,passwordElem.value))
    }
})

export default connect(mapStateToProps,mapDispatchToProps)(Login);